import styled from 'styled-components'
import img from '@img/all.png'
import btnBg from '@img/btn-bg-normal.png'

export const Wrap = styled.div`
	.main {
		padding: 15px 30px 0;
		display: flex;
		height: 500px;
		box-sizing: border-box;

		.leftBox,
		.rightBox {
			width: 340px;
			height: 464px;
			border: 1px solid rgb(234, 235, 236);
		}

		.center {
			width: 70px;
			height: 464px;
			position: relative;

			.btn-box {
				width: 30px;
				height: 180px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);

				.toAllLeft,
				.toLeft,
				.toRight,
				.toAllRight {
					width: 30px;
					height: 30px;
					background: url(${img});
					cursor: pointer;
				}

				.toAllRight {
					background-position: -240px -365px;
				}

				.toAllRight:hover {
					background-position: -270px -365px;
				}

				.toRight {
					background-position: 0px -395px;
				}

				.toRight:hover {
					background-position: -30px -395px;
				}

				.toLeft {
					background-position: -120px -395px;
				}

				.toLeft:hover {
					background-position: -150px -395px;
				}

				.toAllLeft {
					background-position: -240px -395px;
				}

				.toAllLeft:hover {
					background-position: -270px -395px;
				}
			}
		}

		.leftBox {
			display: flex;
			flex-direction: column;

			.title {
				height: 36px;
				border-bottom: 1px solid rgb(234, 235, 236);
				line-height: 36px;
				padding-left: 15px;
			}

			.search {
				height: 48px;
				display: flex;
				padding: 0px 10px;
				align-items: center;
				justify-content: space-between;
			}

			.list {
				padding: 10px 10px;
				height: 100%;
				overflow: auto;

				.list-item {
					height: 30px;
					line-height: 30px;
					margin-bottom: 5px;
					display: flex;
					align-items: center;
					cursor: pointer;
					user-select: none;
					.icon {
						height: 14px;
						width: 14px;
						margin: 0 5px;
						flex-shrink: 0;
					}
					.text {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					.selected {
						background-image: url(${img});
						background-repeat: no-repeat;
						background-position: 0px -2567px;
					}
				}

				.list-item.clicked {
					background: url(${btnBg}) no-repeat 0 0 #69bef0 !important;
					background-size: 100% !important;
					border-color: transparent;
					color: #ffffff;
				}

				.list-item:last-child {
					margin-bottom: 0;
				}
			}
		}

		.rightBox {
			display: flex;
			flex-direction: column;

			.title {
				height: 36px;
				border-bottom: 1px solid rgb(234, 235, 236);
				line-height: 36px;
				padding-left: 15px;
			}

			.list {
				padding: 10px 10px;
				height: 100%;
				overflow: auto;

				.list-item {
					height: 30px;
					line-height: 30px;
					margin-bottom: 5px;
					display: flex;
					align-items: center;
					cursor: pointer;
					padding: 0 5px;
					user-select: none;

					.text {
						margin-left: 10px;
						flex: 1;
					}
				}

				.list-item.clicked {
					background: url(${btnBg}) no-repeat 0 0 #69bef0 !important;
					background-size: 100% !important;
					border-color: transparent;
					color: #ffffff;
				}

				.list-item:hover {
					background: url(${btnBg}) no-repeat 0 0 #69bef0 !important;
					background-size: 100% !important;
					border-color: transparent;
					color: #ffffff;
				}

				.list-item:last-child {
					margin-bottom: 0;
				}
			}

			.footer {
				height: 48px;
				display: flex;
				padding: 0px 10px;
				align-items: center;
				justify-content: space-between;

				.icon {
					background-image: url(${img});
					background-repeat: no-repeat;
					cursor: pointer;
					width: 30px;
					height: 30px;
					min-width: 30px;
					background-position: -120px -365px;
				}

				.icon:hover {
					background-position: -150px -365px;
				}

				.icon:active {
					background-position: -120px -365px;
				}
			}
		}
	}
`
